<template>
    <page-view class="flex flex-row">
        <!-- <div class=" bg-[#304156] transition-all overflow-hidden" -->
        <!-- :class="[isCollapse ? 'collapse-width' : 'w-[200px]']"> -->
        <!-- 不在外层套盒子，才能更加流畅，解决卡顿 -->
        <LeftMenu />
        <!-- </div> -->
        <div class=" flex-1 overflow-auto flex flex-col">
            <div
                class=" nav-bar h-[55px] border-0 border-b border-solid border-gray-200 bg-white flex items-center box-border justify-between px-14">
                <el-icon @click="taggleIsCollapse" size="20px" class="cursor-pointer mt-2">
                    <Fold class="hover:text-primaryColor transition-all" />
                </el-icon>
                <div class="history-list space-x-[5px]">
                    <router-link :to="{ name: item.routeName }" custom v-for="item in historyList" :key="item.routeName"
                        #default="{ navigate, isActive }">
                        <div class="history-item" :class="{ active: isActive }" @click="navigate">
                            {{ item.title }}
                            <span v-if="item.routeName != 'DataView'" class="close"
                                @click.stop="store.removeHisotryByRouteName(item.routeName)">x</span>
                        </div>
                    </router-link>
                </div>

                <!-- 右边的用户下拉菜单 -->
                <el-dropdown @command="handleCommand">
                    <span>
                        欢迎登陆：<span class="font-bold text-[16px] hover:text-primaryColor">{{ loginUserInfo?.admin_name
                        }}</span>
                        <el-icon class="text-primaryColor">
                            <ArrowDown />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>我的信息</el-dropdown-item>
                            <el-dropdown-item>修改密码</el-dropdown-item>
                            <el-dropdown-item divided command="logOut">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
            <div class="bg-[#f5f7f9] flex-1 overflow-auto box-border p-5">
                <router-view></router-view>
            </div>
        </div>
    </page-view>
</template>

<script setup>
import { Fold, ArrowDown } from "@element-plus/icons-vue"
import LeftMenu from '../components/LeftMenu.vue';
import { mainStore } from "../store"
import { storeToRefs } from "pinia"
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from "vue-router"
const store = mainStore();
const router = useRouter();
// 解构出 isCollapse
const { isCollapse, historyList, loginUserInfo } = storeToRefs(store);
// const isCollapse = computed(() => store.isCollapse)
const taggleIsCollapse = () => {
    store.setIsCollapse(!store.isCollapse);
}

const handleCommand = (command) => {
    // console.log(command);
    switch (command) {
        case "logOut":
            logOut();
            break;
    }
}

const logOut = () => {
    ElMessageBox.confirm("你确定要退出吗", {
        confirmButtonText: "退出登录",
        cancelButtonText: "点错了",
        type: "warning",
    }).then(() => {
        store.logOut();
        ElMessage({
            type: "success",
            message: "操作成功"
        })
        router.replace({
            name: "Login"
        })
    }).catch(() => {
        ElMessage({
            type: "warning",
            message: "已取消操作"
        })
    })
}
</script>


<style scoped lang="scss">
.history-list {
    @apply box-border px-[4px] flex-1 h-full flex flex-row items-center ;

    .history-item {
        @apply rounded-full py-3 px-6 text-gray-700 relative border border-dashed border-current h-[26px] px-[5px] text-[12px] flex flex-row justify-center items-center cursor-pointer;

        &:hover {
            @apply text-primaryColor;

            .close {
                display: flex;
            }
        }

        .close {
            border: 1px solid currentColor;
            @apply w-[10px] h-[10px] absolute bg-gray-200 -right-[5px] -top-[5px] rounded-full flex flex-row justify-center items-center bg-white;
            display: none;

            &:hover {
                @apply text-red-500;
            }

        }

        &.active {
            @apply bg-primaryColor text-black border-gray-400;
        }
    }
}
</style>